<template>
    <div class="qilin-fundList">
        <el-card>
            <QilinSearch :searchConfig.sync="searchConfig" @searchData="getTableData()">
                <template v-slot:dateRange="slotData">
                    <el-date-picker v-model="searchConfig.submitData.startTime" type="datetime"
                        placeholder="请输入开始时间" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placement="bottom-start"
                    ></el-date-picker>
                    <span class="search-separate">-</span>
                    <el-date-picker v-model="searchConfig.submitData.endTime" type="datetime"
                        placeholder="请输入结束时间" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placement="bottom-start"
                    ></el-date-picker>
                </template>
            </QilinSearch>
        </el-card>
        <el-card>
            <QilinTable :tableConfig.sync="tableConfig" @changeCurrentPage="handleCurrentPage"
                @changeCurrentSize="handleSizeChange"
            >
                <template v-slot:income="slotData">
                    <span style="color:#00d053;">+{{slotData.data.scope.row.income}}</span>
                </template>
                <template v-slot:expend="slotData">
                    <span style="color:#f56767;">-{{slotData.data.scope.row.expend}}</span>
                </template>
                <template v-slot:cash="slotData">
                    <span style="color:#4db3ff;">{{slotData.data.scope.row.cash}}</span>
                </template>
            </QilinTable>
        </el-card>
        <QilinDialog :dialogConfig.sync="dialogObj" @handleClose="closeDialog"
            @submitConfirm="submitData('formData')"
        >
            <QilinForm :formConfig.sync="formConfig" ref="formData"></QilinForm>
        </QilinDialog>
        <QilinDialog :dialogConfig.sync="viewDialogConfig" @handleClose="closeViewDialog">
            <QilinView :viewConfig.sync="viewConfig">
            </QilinView>
        </QilinDialog>
    </div>
</template>
<script>

import {
    getFundData,
    insertFundData,
    updateFundData,
    deleteFundData
} from "@/api/fundList/index.js";
export default {
    data(){
        return {
            searchConfig:{
                itemConfig:[
                    {
                        labelName:"选择时间",
                        type:"slot",
                        slotName:"dateRange"
                    }
                ],
                submitData:{
                    startTime:"",
                    endTime:""
                },
                buttonConfig:[
                    {
                        btnName:"添加",
                        type:"primary",
                        size:"small",
                        click:this.insertData
                    }
                ]
            },
            dialogObj:{ //弹窗的配置对象
                isShow:false,
                title:"添加资金信息"
            },
            formConfig:{// 弹窗内表格相关配置
                elFormConfig:{
                    labelWidth:"80px"
                },
                itemConfig:[
                    {
                        dataName:"type",
                        labelName:"收支类型",
                        type:"select",
                        dataListName:"typeList",
                        width:12
                    },
                    {
                        dataName:"describe",
                        labelName:"收支描述",
                        type:"input",
                        inputType:"text",
                        width:24
                    },
                    {
                        dataName:"income",
                        labelName:"收入",
                        type:"input",
                        inputType:"number",
                        width:12,
                        validate:[
                            {
                                required:true,
                                message:"请填写收入",
                                trigger:"blur"
                            },
                            {
                                type:"number",
                                transform(value){
                                    return Number(value)
                                },
                                message:"请输入数字",
                                trigger:"blur"
                            }
                        ]
                    },
                    {
                        dataName:"expend",
                        labelName:"支出",
                        type:"input",
                        inputType:"number",
                        width:12,
                        validate:[
                            {
                                required:true,
                                message:"请填写支出",
                                trigger:"blur"
                            },
                            {
                                type:"number",
                                transform(value){
                                    return Number(value)
                                },
                                message:"请输入数字",
                                trigger:"blur"
                            }
                        ]
                    },
                    {
                        dataName:"cash",
                        labelName:"账户现金",
                        type:"input",
                        inputType:"number",
                        width:12,
                        validate:[
                            {
                                required:true,
                                message:"请填写账户现金",
                                trigger:"blur"
                            },
                            {
                                type:"number",
                                transform(value){
                                    return Number(value)
                                },
                                message:"请输入数字",
                                trigger:"blur"
                            }
                        ]
                    },
                    {
                        dataName:"remark",
                        labelName:"备注",
                        type:"input",
                        inputType:"textarea",
                        width:24
                    }
                ],
                selectLists:{
                    typeList:[
                        {
                            label:"优惠券",
                            value:"优惠券"
                        },
                        {
                            label:"会员卡",
                            value:"会员卡"
                        }
                    ]
                },
                submitData:{
                    type:"",
                    describe:"",
                    income:"",
                    expend:"",
                    cash:"",
                    remark:""
                }
            },
            tableConfig:{//封装表格配置项
                headerConfig:[
                    {
                        label:"序号",
                        type:"sortIndex",
                        width:60
                    },
                    {
                        label:"收支类型",
                        prop:"type",
                        width:80
                    },
                    {
                        label:"收支描述",
                        prop:"describe",
                        width:150
                    },
                    {
                        label:"收入",
                        prop:"income",
                        width:80,
                        type:"slot",
                        slotName:"income"
                    },
                    {
                        label:"支出",
                        prop:"expend",
                        width:80,
                        type:"slot",
                        slotName:"expend"
                    },
                    {
                        label:"账户现金",
                        prop:"cash",
                        width:80,
                        type:"slot",
                        slotName:"cash"
                    },
                    {
                        label:"备注",
                        prop:"remark",
                        ellipsis:true
                    },
                    {
                        label:"日期",
                        prop:"date",
                        width:180,
                        type:"date"
                    },
                    {
                        label:"操作",
                        type:"operate",
                        width:220,
                        operateOptions:[
                            {
                                buttonName:"查看",
                                buttonType:"primary",
                                buttonSize:"mini",
                                buttonEvent:this.viewData
                            },
                            {
                                buttonName:"编辑",
                                buttonType:"warning",
                                buttonSize:"mini",
                                buttonEvent:this.updateData
                            },
                            {
                                buttonName:"删除",
                                buttonType:"danger",
                                buttonSize:"mini",
                                buttonEvent:this.deleteData
                            }
                        ]
                    }
                ],
                tableData:[],
                paginationsObj:{
                    currentPage:1, //当前页
                    pageSize:5, //当前每页数量
                    pageSizes:[5,10,15], //每页显示多少条选项集
                    total:0, //表格总数量
                    layout:"total,sizes,prev,pager,next,jumper"
                }
            },
            viewDialogConfig:{ //查看时的弹窗配置
                isShow:false,
                title:"查看资金信息"
            },
            viewConfig:{
                itemConfig:[
                    {
                        type:"text",
                        label:"收支类型",
                        value:"type",
                        col:8
                    },
                    {
                        type:"text",
                        label:"收支描述",
                        value:"decribe",
                        col:8
                    },
                    {
                        type:"text",
                        label:"收入",
                        value:"income",
                        col:8
                    },
                    {
                        type:"text",
                        label:"支出",
                        value:"expend",
                        col:8
                    },
                    {
                        type:"text",
                        label:"账户现金",
                        value:"cash",
                        col:16
                    },
                    {
                        type:"text",
                        label:"备注",
                        value:"remake",
                        col:16
                    },
                    {
                        type:"text",
                        label:"日期",
                        value:"date",
                        col:8
                    }
                ],
                viewData:{
                    type:"",
                    describe:"",
                    income:"",
                    expend:"",
                    cash:"",
                    remark:"",
                    date:""
                }
            },
        };
    },
    computed:{
        getData(){
            return function(data){
                console.log(data);
            };
        }
    },
    methods:{
        //点击添加按钮事件监听
        insertData(){
            this.dialogObj.title="添加资金信息";
            this.dialogObj.isShow=true;
        },
        //关闭弹窗事件监听
        closeDialog(){
            this.$refs["formData"].formResetFields();
            this.dialogObj.isShow=false;
        },
        //点击弹窗确认按钮事件监听
        submitData(refName){
            this.$refs[refName].formValidate((valid)=>{
                if(valid){
                    // console.log(this.formData);
                    if(this.formConfig.submitData._id){//编辑时进入
                        updateFundData(this.formConfig.submitData._id,{
                            type:this.formConfig.submitData.type,
                            describe:this.formConfig.submitData.describe,
                            income:this.formConfig.submitData.income,
                            expend:this.formConfig.submitData.expend,
                            cash:this.formConfig.submitData.cash,
                            remark:this.formConfig.submitData.remark
                        }).then((res)=>{
                            if(res.code===1000){
                                this.$message({
                                    message:"编辑资金成功",
                                    type:"success"
                                });
                                this.closeDialog(); //关闭弹窗并且重置表单
                                this.getTableData(); //获取表格数据
                            };
                        });
                    }else{//新增时进入
                        insertFundData(this.formConfig.submitData).then((res)=>{
                            if(res.code===1000){
                                this.$message({
                                    message:"添加资金成功",
                                    type:"success"
                                });
                                this.closeDialog(); //关闭弹窗并且重置表单
                                this.tableConfig.paginationsObj.currentPage=1;
                                this.getTableData(); //获取表格数据
                            };
                        });
                    };
                };
            });
        },
        //点击切换页码事件监听
        handleCurrentPage(val){
            // console.log(val);
            this.tableConfig.paginationsObj.currentPage=val;
            this.getTableData();
        },
        //点击切换每页数量事件监听
        handleSizeChange(val){
            // console.log(val);
            this.tableConfig.paginationsObj.pageSize=val;
            this.getTableData();
        },
        //初始化获取表格内数据
        getTableData(){
            getFundData({
                pageNum:this.tableConfig.paginationsObj.currentPage,
                pageSize:this.tableConfig.paginationsObj.pageSize,
                startTime:this.searchConfig.submitData.startTime,
                endTime:this.searchConfig.submitData.endTime
            }).then((res)=>{
                if(res.code===1000){
                    this.tableConfig.tableData=res.data.data;
                    this.tableConfig.paginationsObj.total=res.data.total;
                };
            });
        },
        //点击编辑按钮事件监听
        updateData(row){
            // console.log(row);
            this.dialogObj.title="编辑资金信息";
            this.dialogObj.isShow=true;
            this.formConfig.submitData={...row};
        },
        //点击删除按钮事件监听
        deleteData(row){
            // console.log(row);
            this.$confirm("是否删除此条数据？","提示",{
                showCancelButton:true,
                closeOnClickModal:false,
                type:"warning"
            }).then(()=>{
                deleteFundData(row._id).then((res)=>{
                    if(res.code===1000){
                        this.$message({
                            message:"删除成功",
                            type:"success"
                        });
                        if(this.tableConfig.tableData.length === 1 && this.tableConfig.paginationsObj.currentPage != 1){
                            this.tableConfig.paginationsObj.currentPage-=1;
                        };
                        this.getTableData();
                    };
                });
            }).catch(()=>{
                console.log("取消删除操作");
            });
        },
        // 点击查看那妞事件监听
        viewData(row){
            console.log(row);
            this.viewDialogConfig.isShow=true;
        },
        // 点击关闭查看弹窗事件监听
        closeViewDialog(){
            this.viewDialogConfig.isShow=false;
        },
    },
    mounted(){
        this.getTableData();
    }
}
</script>
<style lang="less" scoped>
.qilin-fundList{
    width:100%;
    padding:0 10px 40px;
    .qilin-QilinSearch{
        .el-form{
            .search-separate{
                margin:0 10px;
            }
        }
    }
}
</style>